import React, { useEffect, useState, useRef } from 'react';
import { Spin } from 'antd';

import { debounce } from 'lodash';
import asyncLoad from '~/utils/asyncLoad';

// A
import JoditEditor from 'jodit-react';

// B
import SunEditor, { buttonList } from 'suneditor-react';
import 'suneditor/dist/css/suneditor.min.css';

// C
import FroalaEditorComponent from 'react-froala-wysiwyg';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

// D
import ReactSummernote from 'react-summernote';
import 'react-summernote/dist/react-summernote.css'; // import styles

const MenuList = [
  {
    value: 'jodit-react',
    Comp: JoditEditor,
    link: 'https://xdsoft.net/jodit/',
    compProps: {
      config: {
        readonly: false,
        toolbar: true,
        language: 'zh_cn',
        height: 600,
        placeholder: '李多多告诉你在这里输入',
      },
    },
  },
  {
    value: 'suneditor-react',
    Comp: SunEditor,
    link: 'https://github.com/mkhstar/suneditor-react',
    compProps: {
      name: 'sun-editor',
      lang: 'zh_cn',
      toolbarContainer: '<div>dododo</div>',
      maxCharCount: 10000,
      enableToolbar: true,
      height: 600,
      placeholder: '李多多告诉你在这里输入',
    },
  },
  {
    value: 'react-froala-wysiwyg',
    Comp: FroalaEditorComponent,
    link: 'https://froala.com/wysiwyg-editor/docs/options',
    tip: <div style={{ color: 'red' }}>该编辑器收费的</div>,
    compProps: {
      config: {
        readonly: false,
        toolbar: true,
        language: 'zh_cn',
        height: 600,
        placeholder: '李多多告诉你在这里输入',
      },
    },
  },
  {
    value: 'react-summernote',
    Comp: ReactSummernote,
    link: 'https://summernote.org/',
    // asyncLoadList: ['/static/lib/summernote-zh-CN.js'],
    tip: <div style={{ color: 'red' }}>该编辑器依赖jQuery等有一大推，超级恶心</div>,
    compProps: {
      options: {
        lang: 'zh-CN',
        height: 350,
        dialogsInBody: true,
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['fontname', ['fontname']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']],
          ['view', ['fullscreen', 'codeview']],
        ],
      },
    },
  },
];

const From = () => {
  const sunRef = useRef();
  const valueRef = useRef();
  const [tab, setTab] = useState(MenuList[0]);
  const [ready, setReady] = useState(false);

  const [value, setValue] = useState('');

  const onChange = debounce((e) => {
    console.log('onChange', e);
    if (valueRef.current === e) return;
    valueRef.current = e;
    setValue(e);
  }, 500);

  useEffect(() => {
    const arr = MenuList.filter((d) => d.asyncLoadList)
      .map((d) => d.asyncLoadList)
      .reduce((t, k) => [...t, ...k], []);

    asyncLoad(arr).then(() => setReady(true));
  }, []);

  const { Comp, compProps, link, tip } = tab;

  if(!ready) return <Spin />;

  return (
    <div className="page-richeditor">
      <div className="comp-head">
        {MenuList.map((d) => (
          <span
            key={d.value}
            className={`menu-item ${d.value === tab.value ? 'active' : ''}`}
            onClick={() => setTab(d)}
          >
            {d.value}
          </span>
        ))}
      </div>
      <div className="comp-neck">
        <span>文档地址</span>
        <a className="comp-neck-link" href={link} target="_blank">
          {link}
        </a>
        {tip}
      </div>

      <div className="comp-body">
        <div className={`comp-editor ${tab.value === 'jodit-react' ? 'active' : ''}`}>
          <JoditEditor
            {...MenuList[0].compProps}
            // 这里onChange可能有问题，换行光标会自动跳上去
            // onChange={onChange}
            onBlur={onChange}
            value={value}
          />
        </div>

        <div className={`comp-editor ${tab.value === 'suneditor-react' ? 'active' : ''}`}>
          <SunEditor
            {...MenuList[1].compProps}
            setOptions={{
              maxCharCount: 10000,
              buttonList: buttonList.complex, // Or Array of button list, eg. [['font', 'align'], ['image']]
              // Other option
              imageUploadHeader: (e) => {
                console.log('imageUploadHeader', e);
              },
            }}
            maxCharCount={1000}
            setDefaultStyle="font-family: cursive; font-size: 10px;"
            // 这里的onChange已经做了防抖
            onChange={onChange}
            // onChange={e => console.log('sun onChange', e)}
            onBlur={(e) => console.log('sun onBlur', e)}
            setContents={value}
            // defaultValue={value}
            ref={sunRef}
          />
        </div>

        <div className={`comp-editor ${tab.value === 'react-froala-wysiwyg' ? 'active' : ''}`}>
          <FroalaEditorComponent
            {...MenuList[2].compProps}
            setOptions={{
              maxCharCount: 10000,
              buttonList: buttonList.complex, // Or Array of button list, eg. [['font', 'align'], ['image']]
              // Other option
              imageUploadHeader: (e) => {
                console.log('imageUploadHeader', e);
              },
            }}
            tag="textarea"
            model={value}
            onModelChange={onChange}
          />
        </div>

        <div className={`comp-editor ${tab.value === 'react-summernote' ? 'active' : ''}`}>
          {false && <ReactSummernote
            {...MenuList[2].compProps}
            setOptions={{
              maxCharCount: 10000,
              buttonList: buttonList.complex, // Or Array of button list, eg. [['font', 'align'], ['image']]
              // Other option
              imageUploadHeader: (e) => {
                console.log('imageUploadHeader', e);
              },
            }}
            tag="textarea"
            value={value}
            onChange={onChange}
          />}
        </div>
      </div>
    </div>
  );
};

export default From;
